import 'package:flutter/material.dart';
import 'package:flutter_wisave/Tools/ToolsLocalStorage.dart';
import '../../widgets/AppColors.dart';

class SkinPage extends StatefulWidget {
  const SkinPage({super.key});

  @override
  State<SkinPage> createState() => _SkinPageState();
}

class _SkinPageState extends State<SkinPage> {
  static const array = ['浅色', '深色', '跟随系统'];

  String? savedTheme;

  @override
  void initState() {
    super.initState();
    _loadSavedTheme();
  }

  _loadSavedTheme() async {
    savedTheme = await LocalStorage.getstr('theme');
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.backgroundColor,
      appBar: AppBar(
        title: const Text('模式'),
        foregroundColor: AppColors.textPrimary,
        backgroundColor: const Color.fromARGB(0, 238, 236, 236),
        flexibleSpace: Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/images/home/home_topbg.png'),
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
      body: Column(
        children: [
          Container(
            height: 112 + 56,
            margin: const EdgeInsets.all(15.0),
            decoration: BoxDecoration(
              color: AppColors.cardColor,
              borderRadius: BorderRadius.circular(10.0),
            ),
            child: ListView.builder(
              itemCount: array.length,
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              itemBuilder: (context, index) {
                return GestureDetector(
                  onTap: () {
                    AppColors.switchTheme(index);
                    LocalStorage.setstr('theme', index.toString());
                    setState(() {});
                    // 延迟一小段时间后重启应用
                    Future.delayed(const Duration(milliseconds: 200), () {
                      // 清空导航栈并重新启动应用
                      Navigator.pushNamedAndRemoveUntil(
                        context,
                        '/',
                        (route) => false,
                      );
                    });
                  },
                  child: _buildListItem(
                      array[index],
                      '',
                      index == array.length - 1,
                      savedTheme == index.toString()),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildListItem(
      String title, String content, bool isLast, bool isSelect) {
    return Container(
      padding: const EdgeInsets.all(15.0),
      height: 56,
      decoration: BoxDecoration(
        border: Border(
          bottom: isLast
              ? BorderSide.none
              : BorderSide(color: AppColors.dividerColor),
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween, // 使内容两端对齐
            children: [
              Row(
                children: [
                  Text(
                    title,
                    style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                        color: isSelect
                            ? Color(0xFF2AB6F7)
                            : AppColors.textPrimary),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}
